[css] 스타일속성 gap을 flex에서 사용하기

Last Modified : 2020-12-05 / Created : 2020-12-05

48,195
View Count

주소 복사하기

CSS 스타일 속성 gap에 대하여 알아보려고 합니다.

# css gap 스타일 속성

gap은 내부의 children 요소들이 일정한 간격으로 떨어져 위치할 수 있도록 사용하는 스타일 속성입니다. 보통 가지고 있는 엘리먼트 요소들의 사이를 구분하기 위해서 흔히 margin 값을 사용하죠. 만약 두 줄 이상인 경우라면 margin-bottom을 함께 사용하여 구현하게 됩니다.

! margin과 gap을 사용할 때의 차이점은?

먼저 gap을 왜 사용하는 것이 좋을까요? margin gap의 차이점은 gap의 경우 엘리먼트 요소들의 사이에만 공간(space)을 만든다는 점입니다.

"gap 스타일 속성은 인접한 요소가 있을때만 갭(gap)을 만든다"

예를들어 margin의 경우 인접한 요소들의 존재 여부와 상관없이 항상 스타일이 사용되죠. 하지만 gap의 경우 인접한 요소가 없다면? 당연히 불필요한 공간(space)을 만들지 않습니다.

결론부터 얘기하면 불필요한 공간을 만들지 않아 더욱 정렬된 상태의 레이아웃을 구현할 수 있도록 해줍니다.

! 예전에는 gap을 자주 쓰지 못했는데...

참고로 예전에는 gap 속성을 사용하는 브라우저가 많지 않았고 gap 속성을 사용하기 위해서 grid 레이아웃이 필요했지만 지금은 자주 사용하는 flex 레이아웃 역시 gap을 사용할 수 있으며 크롬을 비롯한 대부분의 메이저 브라우저에서 사용 가능하기 때문에 앞으로는 자식 요소, 아이템들의 정렬을 위해서 점점 gap을 사용하는 경우가 늘어날 것이라 생각할 수 있습니다.

아래는 gap 스타일속성 문법입니다.

gap: 상하좌우 전체의 값;
gap: 상하 사이의값 좌우 상이의값;

gap은 전체 값을 적용할 수도 있고 띄어쓰기를 구분자로하여 상하 그리고 좌우 다르게 값을 적용하는 것도 가능합니다. 그럼 아래에서 간단한 예제를 만들어보겠습니다.

! Flex 레이아웃 gap 사용 예제보기

아래 예제는 flex레이아웃을 가지는 부모요소에 gap을 사용하여 자식요소들의 여백을 조정한 예제입니다. 먼저 html 코드이며 다음이 css 설정 코드입니다.

@ parent.html

다음은 gap을 사용하기 전의 css 스타일입니다.

.test-parent {
display: flex;
flex-wrap: wrap;
}
.test-child {
width: 180px;
height: 180px;
background: gray;
color: white;
font-size: 3em;
}

이제 몇 가지 예제를 만들어 어떻게 동작하는지 아래에서 확인해보세요!

@ 상하좌우 10px 설정하기, gap
부모 요소인 .test-parent 에 gap: 10px을 추가하여 선언하도록 합니다. 어떻게 나타나는지 아래에서 확인하세요.

.test-parent {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

[ 코드 실행 결과 ]

<div class="test-parent test1">
<div class="test-child">1</div>
<div class="test-child">2</div>
<div class="test-child">3</div>
<div class="test-child">4</div>
<div class="test-child">5</div>
<div class="test-child">6</div>
<div class="test-child">7</div>
<div class="test-child">8</div>
<div class="test-child">9</div>
</div>
<style>
.test-parent.test1 {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.test-parent.test1 .test-child {
width: 180px;
height: 180px;
background: gray;
color: white;
font-size: 3em;
}
</style>

@ 상하 50px 좌우 10px 설정하기, gap
이번에는 상하, 좌우 각각 다른 값을 적용하는 예제입니다.

.test-parent {
display: flex;
flex-wrap: wrap;
gap: 50px 10px;
}

[ 코드 실행 결과 ]

<div class="test-parent test2">
<div class="test-child">1</div>
<div class="test-child">2</div>
<div class="test-child">3</div>
<div class="test-child">4</div>
<div class="test-child">5</div>
<div class="test-child">6</div>
<div class="test-child">7</div>
<div class="test-child">8</div>
<div class="test-child">9</div>
</div>
<style>
.test-parent.test2 {
display: flex;
flex-wrap: wrap;
gap: 50px 10px;
}
.test-parent.test2 .test-child {
width: 180px;
height: 180px;
background: darkblue;
color: white;
font-size: 3em;
}
</style>

보시면 상하 간격이 50px로 설정된 것을 보실 수 있습니다.

여기까지 gap 스타일 속성을 사용하는 방법과 예제에 대하여 알아보았습니다.

flex gap

아래의 글도 찾고 계시지 않나요?

[CSS] 리스트 요소의 순서를 반대로(reverse) 바꾸는 방법

[CSS] box-shadow 효과를 아래 또는 위 한 방향만 적용하는 방법